
<template>
  <div class="box">
    <div class="header">
      <div class="info">
        <el-icon><PartlyCloudy /></el-icon>
        <p class="boxDate">{{ weatcherData.tem }}℃</p>
        <p class="boxTime">| {{ dateDay }} |</p>
        <p class="boxDate">{{ dateYear }}</p>
      </div>
      <div class="top-middle">
        <img src="../assets/dataanaly-1.png" style="height: 3rem" />
        <div class="title">数据分析看板</div>
      </div>
      <div class="right">
        <div
          class="exit-button"
          @mouseover="changeColor"
          @mouseout="restoreColor"
          :style="{ cursor: cursorStyle }"
        >
          <p
            :style="{ color: textColor }"
            style="
              margin-top: 0.5rem;
              margin-left: 2rem;
              font-size: 0.9rem;

              font-weight: 400;
              line-height: 1rem;
            "
          >
            退出
          </p>
        </div>
      </div>
    </div>
    <div class="ana-body">
      <div class="ana-item">
        <div class="ana-item1">
          <div class="container">
            <div class="full-secondtitle">
              <div class="h1">事件协同概况</div>
            </div>
          </div>
          <div class="ana-container">
            <div class="flex-ana-container">
              <div class="flex-ana-item">
                <!-- 图片 -->
                <img
                  src="../assets/dataana-item-1.png"
                  style="width: 1.6rem; height: 1.7rem"
                  alt="image"
                  class="ana-image"
                />
              </div>
              <div class="flex-ana-item">
                <div class="flex-ana-text">
                  <!-- 数字 -->
                  <div class="ana-number">{{ allthings }}</div>
                  <div class="ana-text1"></div>
                  <!-- 文字 -->
                </div>
                <span class="ana-text2">{{ text3 }}事件总量</span>
              </div>
            </div>
            <div class="flex-ana-container">
              <div class="flex-ana-item">
                <!-- 图片 -->
                <img
                  src="../assets/dataana-item-2.png"
                  style="width: 1.6rem; height: 1.7rem"
                  alt="image"
                  class="ana-image"
                />
              </div>
              <div class="flex-ana-item">
                <div class="flex-ana-text">
                  <!-- 数字 -->
                  <div class="ana-number">{{ daily }}</div>
                  <div class="ana-text1"></div>
                  <!-- 文字 -->
                </div>
                <span class="ana-text2">{{ text3 }}日均受理</span>
              </div>
            </div>
            <div class="flex-ana-container">
              <div class="flex-ana-item">
                <!-- 图片 -->
                <img
                  src="../assets/dataana-item-3.png"
                  style="width: 1.6rem; height: 1.7rem"
                  alt="image"
                  class="ana-image"
                />
              </div>
              <div class="flex-ana-item">
                <div class="flex-ana-text">
                  <!-- 数字 -->
                  <div class="ana-number">{{ finishrate }}</div>
                  <div class="ana-text1">%</div>
                  <!-- 文字 -->
                </div>
                <span class="ana-text2">{{ text3 }}办结率</span>
              </div>
            </div>
          </div>
        </div>
        <div class="ana-item2">
          <div class="container">
            <div class="full-secondtitle">
              <div class="h1">本月/上月事件概况</div>
            </div>
          </div>
          <div class="ana-container">
            <div class="flex-ana-container2">
              <div class="flex-ana-item2">
                <div class="ana-text3">本月</div>
              </div>
              <div class="flex-ana-item2">
                <div class="flex-ana-text">
                  <!-- 数字 -->
                  <div class="ana-number">{{ allthings2 }}</div>
                  <div class="ana-text1"></div>
                  <!-- 文字 -->
                </div>
                <span class="ana-text2">{{ text3 }}上报量</span>
              </div>
              <div class="flex-ana-item2">
                <div class="flex-ana-text">
                  <!-- 数字 -->
                  <div class="ana-number">{{ finish2 }}</div>
                  <div class="ana-text1"></div>
                  <!-- 文字 -->
                </div>
                <span class="ana-text2">{{ text3 }}结办量</span>
              </div>
              <div class="flex-ana-item2">
                <div class="flex-ana-text">
                  <!-- 数字 -->
                  <div class="ana-number">{{ finishrate2 }}</div>
                  <div class="ana-text1">%</div>
                  <!-- 文字 -->
                </div>
                <span class="ana-text2">{{ text3 }}结办率</span>
              </div>
            </div>
            <el-divider style="height: 5rem" direction="vertical" />
            <div class="flex-ana-container2">
              <div class="flex-ana-item2">
                <div class="ana-text3">上月</div>
              </div>
              <div class="flex-ana-item2">
                <div class="flex-ana-text">
                  <!-- 数字 -->
                  <div class="ana-number">{{ allthings3 }}</div>
                  <div class="ana-text1"></div>
                  <!-- 文字 -->
                </div>
                <span class="ana-text2">{{ text3 }}上报量</span>
              </div>
              <div class="flex-ana-item2">
                <div class="flex-ana-text">
                  <!-- 数字 -->
                  <div class="ana-number">{{ finish3 }}</div>
                  <div class="ana-text1"></div>
                  <!-- 文字 -->
                </div>
                <span class="ana-text2">{{ text3 }}结办量</span>
              </div>
              <div class="flex-ana-item2">
                <div class="flex-ana-text">
                  <!-- 数字 -->
                  <div class="ana-number">{{ finishrate3 }}</div>
                  <div class="ana-text1">%</div>
                  <!-- 文字 -->
                </div>
                <span class="ana-text2">{{ text3 }}结办率</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ana-item">
        <div class="ana-item1">
          <div class="container">
            <div class="full-secondtitle">
              <div class="h1">近三个月事件量增长最快区域TOP3</div>
            </div>
          </div>
          <div class="ana-container">
            <div class="cht-ana1">
              <v-chart
                id="chart21"
                ref="chart21"
                class="chart21"
                :option="option21"
              />
              <div class="ana-item-bj4"></div>
              <div class="ana-item-bj5"></div>
              <div class="ana-item-bj6"></div>
            </div>
            <!-- <div class="cht1">
      <v-chart id="chart1" ref="chart1" class="chart1" :option="option1" />
    </div> -->
          </div>
        </div>
        <div class="ana-item2">
          <div class="container">
            <div class="full-secondtitle">
              <div class="h1">事件创建高发区域TOP6</div>
            </div>
          </div>
          <div class="ana-container">
            <div class="ana-cht1">
              <div class="cht-1"></div>
              <div class="cht-2"></div>
              <div class="cht-3"></div>
              <div class="cht-4">4</div>
              <div class="cht-4">5</div>
              <div class="cht-4">6</div>
            </div>
            <div class="cht-ana2">
              <v-chart
                id="chart22"
                ref="chart22"
                class="chart22"
                :option="option22"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="ana-item">
        <div class="ana-item1">
          <div class="container">
            <div class="full-secondtitle">
              <div class="h1">近三个月事件量增长最快类型TOP3</div>
            </div>
          </div>
          <div class="ana-container">
            <div class="cht-ana3">
              <v-chart
                id="chart23"
                ref="chart23"
                class="chart23"
                :option="option23"
              />
              <div class="ana-item-bj1"></div>
              <div class="ana-item-bj2"></div>
              <div class="ana-item-bj3"></div>
            </div>

            <!-- <div class="cht1">
      <v-chart id="chart1" ref="chart1" class="chart1" :option="option1" />
    </div> -->
          </div>
        </div>
        <div class="ana-item2">
          <div class="container">
            <div class="full-secondtitle">
              <div class="h1">事件高发类型TOP6</div>
            </div>
          </div>
          <div class="ana-container">
            <div class="ana-cht1">
              <div class="cht-1"></div>
              <div class="cht-2"></div>
              <div class="cht-3"></div>
              <div class="cht-4">4</div>
              <div class="cht-4">5</div>
              <div class="cht-4">6</div>
            </div>
            <div class="cht-ana4">
              <v-chart
                id="chart24"
                ref="chart24"
                class="chart24"
                :option="option24"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="ana-item">
        <div class="return" @click="backhome"><span>返回首页</span></div>
      </div>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import axios from "axios";
import router from "@/router";
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
export default {
  data() {
    return {
      allthings: 0,
      daily: 0,
      finishrate: 0,
      allthings2: 0,
      finish2: 0,
      finishrate2: 0,
      allthings3: 0,
      finish3: 0,
      finishrate3: 0,
      data: [
        { value: 100, color: "blue" },
        { value: 150, color: "green" },
        { value: 200, color: "orange" },
      ],
      cursorStyle: "default",
      textColor: "white",
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weatcherData: [],
      weekday: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ],
      timer: null,
    };
  },

  setup() {
    // const chart1 = ref(null);
    // const option1 = ref(null);
    const chart21 = ref(null);
    const option21 = ref(null);
    const chart22 = ref(null);
    const option22 = ref(null);
    const chart23 = ref(null);
    const option23 = ref(null);
    const chart24 = ref(null);
    const option24 = ref(null);
    async function fetchData() {
      try {
        console.log("222222");
        var gradientColors = [
          ["#E1E1E200", "#E1E1E2"],
          ["#E1E1E200", "#E1E1E2"],
          ["#E1E1E200", "#E1E1E2"],
          ["#EC791400", "#D57117"],
          ["#EC791400", "#D57117"],
          ["#EC791400", "#D57117"],
        ];
        option21.value = {
          tooltip: {
            trigger: "axis",
            textStyle: {
              fontSize: 16, // 设置图例文字大小
            },
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          grid: {
            top: "18%",
            left: "10%",
            bottom: "10%",
            tooltip: {
              axisPointer: {
                label: {
                  fontSize: 16,
                },
              },
            },
          },

          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed"],
            axisPointer: {
              type: "shadow",
            },
            nameTextStyle: {
              fontSize: 16,
            },
            axisLabel: {
              interval: 0,
              fontSize: 16,
              color: "#ffffff", // 设置图例文字大小
            },
            axisTick: {
              show: false,
            },
          },

          yAxis: {
            type: "value",
            show: false,
          },
          series: [
            {
              name: "事件总数",
              type: "bar",
              barWidth: 38,
              itemStyle: {
                color: function (params) {
                  // 设置白色渐变和红色渐变的间隔
                  if (params.dataIndex === 0) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#D4711840" },
                      { offset: 0.1, color: "#D47118" },
                      { offset: 0.5, color: "#D4711896" },
                      { offset: 1, color: "#D4711800" },
                    ]);
                  } else if (params.dataIndex === 1) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#20BAB140" },
                      { offset: 0.1, color: "#20BAB1" },
                      { offset: 0.5, color: "#20BAB196" },
                      { offset: 1, color: "#20BAB100" },
                    ]);
                  } else
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#04D74C40" },
                      { offset: 0.1, color: "#04D74C" },
                      { offset: 0.5, color: "#04D74C65" },
                      { offset: 1, color: "#04D74C00" },
                    ]);
                },
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + " 件";
                },
              },
              label: {
                show: true,
                position: "top",
                itemWidth: 8,
                itemHeight: 5,
                textStyle: {
                  fontSize: 16,
                  color: "#ffffff", // 设置图例文字大小
                },
              },
              data: [120, 200, 150],
            },
          ],
        };
        option22.value = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            top: "0%",
            left: "0%",
            right: "4%",
            bottom: "-10%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            show: false,
          },
          yAxis: {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: 30,
              fontSize: 16,
              align: "right",
              color: "#ffffff",
            },
            data: [
              "陶家浜",
              "陶家浜2",
              "陶家浜3",
              "陶家浜4",
              "陶家浜5",
              "陶家浜6",
            ],
          },
          series: [
            {
              name: "2011",
              type: "bar",
              data: [18203, 23489, 29034, 104970, 131744, 630230],
              barWidth: 20,
              label: {
                show: true,
                fontSize: 16,
                color: "#ffffff",
                formatter: function (params) {
                  return params.value + "(" + ")";
                },
                position: "right",
              },
              itemStyle: {
                borderRadius: [0, 10, 10, 0],
                color: function (params) {
                  // 根据条形的索引选择对应的渐变色
                  return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: gradientColors[params.dataIndex][0],
                    },
                    {
                      offset: 1,
                      color: gradientColors[params.dataIndex][1],
                    },
                  ]);
                },
              },
            },
          ],
        };
        option23.value = {
          tooltip: {
            trigger: "axis",
            textStyle: {
              fontSize: 16, // 设置图例文字大小
            },
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          grid: {
            top: "18%",
            left: "10%",
            bottom: "10%",
            tooltip: {
              axisPointer: {
                label: {
                  fontSize: 16,
                },
              },
            },
          },

          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed"],
            axisPointer: {
              type: "shadow",
            },
            nameTextStyle: {
              fontSize: 16,
            },
            axisLabel: {
              interval: 0,
              fontSize: 16,
              color: "#ffffff", // 设置图例文字大小
            },
            axisTick: {
              show: false,
            },
          },

          yAxis: {
            type: "value",
            show: false,
          },
          series: [
            {
              name: "事件总数",
              type: "bar",
              barWidth: 38,
              itemStyle: {
                color: function (params) {
                  // 设置白色渐变和红色渐变的间隔
                  if (params.dataIndex === 0) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#D4711840" },
                      { offset: 0.1, color: "#D47118" },
                      { offset: 0.5, color: "#D4711896" },
                      { offset: 1, color: "#D4711800" },
                    ]);
                  } else if (params.dataIndex === 1) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#20BAB140" },
                      { offset: 0.1, color: "#20BAB1" },
                      { offset: 0.5, color: "#20BAB196" },
                      { offset: 1, color: "#20BAB100" },
                    ]);
                  } else
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#04D74C40" },
                      { offset: 0.1, color: "#04D74C" },
                      { offset: 0.5, color: "#04D74C65" },
                      { offset: 1, color: "#04D74C00" },
                    ]);
                },
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value + " 件";
                },
              },
              label: {
                show: true,
                position: "top",
                itemWidth: 8,
                itemHeight: 5,
                textStyle: {
                  fontSize: 16,
                  color: "#ffffff", // 设置图例文字大小
                },
              },
              data: [120, 200, 150],
            },
          ],
        };
        option24.value = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            top: "0%",
            left: "0%",
            right: "4%",
            bottom: "-10%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            show: false,
          },
          yAxis: {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: 30,
              fontSize: 16,
              align: "right",
              color: "#ffffff",
            },
            data: [
              "陶家浜",
              "陶家浜2",
              "陶家浜3",
              "陶家浜4",
              "陶家浜5",
              "陶家浜6",
            ],
          },
          series: [
            {
              name: "2011",
              type: "bar",
              data: [18203, 23489, 29034, 104970, 131744, 630230],
              barWidth: 20,
              label: {
                show: true,
                fontSize: 16,
                color: "#ffffff",
                formatter: function (params) {
                  return params.value + "(" + ")";
                },
                position: "right",
              },
              itemStyle: {
                borderRadius: [0, 10, 10, 0],
                color: function (params) {
                  // 根据条形的索引选择对应的渐变色
                  return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: gradientColors[params.dataIndex][0],
                    },
                    {
                      offset: 1,
                      color: gradientColors[params.dataIndex][1],
                    },
                  ]);
                },
              },
            },
          ],
        };
      } catch (error) {
        console.error("Failed to fetch data:", error);
      }
    }
    // 初始化echarts图表
    function initChart() {
      //   chart1.value = echarts.init(document.getElementById("chart1"));
      chart22.value = echarts.init(document.getElementById("chart22"));
      chart21.value = echarts.init(document.getElementById("chart21"));
      chart23.value = echarts.init(document.getElementById("chart23"));
      chart24.value = echarts.init(document.getElementById("chart24"));
      console.log("3333");
      watch(
        option22,
        () => {
          //   chart1.value.setOption(option1.value);
          chart22.value.setOption(option22.value);
          chart24.value.setOption(option24.value);
          chart21.value.setOption(option21.value);
          chart23.value.setOption(option23.value);
        },
        { deep: true }
      );
    }
    onMounted(() => {
      initChart();
      fetchData();
    });
    return {
      //   option1,
      option21,
      option22,
      option23,
      option24,
    };
  },
  async mounted() {
    const allinfo = await axios.get(
      "http://bolincun.xinpanmen.com:9002/bigscreen_cooperation"
      // {
      //   start: "start.value",
      //   end: "end.value",
      // }
    );
    this.allthings = allinfo.data.total;
    this.daily = allinfo.data.daily;
    this.finishrate = allinfo.data.finishrate;
    const allinfo2 = await axios.get(
      "http://bolincun.xinpanmen.com:9002/bigscreen_month"
    );
    this.allthings2 = allinfo2.data.total;
    this.finish2 = allinfo2.data.finish;
    this.finishrate2 = allinfo2.data.finishrate;
    this.allthings3 = allinfo2.data.lasttotal;
    this.finish3 = allinfo2.data.lastfinish;
    this.finishrate3 = allinfo2.data.lastfinishrate;
    this.timer = setInterval(() => {
      const date = dayjs(new Date());
      this.dateDay = date.format("HH:mm:ss");
      this.dateYear = date.format("YYYY年MM月DD日");
      this.dateWeek = date.format(this.weekday[date.day()]);
    }, 1000); //每秒一次
    this.getWeather();
    this.timer = setInterval(() => {
      this.getWeather();
    }, 1000 * 60 * 60); //每小时调用一次
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    backhome() {
      router.push("/");
    },
    changeColor() {
      this.textColor = "aqua";
      this.cursorStyle = "pointer";
    },
    restoreColor() {
      this.textColor = "aliceblue"; // 还原为原来的颜色
    },
    getWeather() {
      // 第三方天气api接口
      axios
        .get("https://v1.yiketianqi.com/api", {
          params: {
            unescape: "1",
            appid: "43656176",
            appsecret: "I42og6Lm",
            // version: 'v91'
          },
        })
        .then((res) => {
          console.log(res.data.data);
          if (res.data) {
            this.weatcherData = res.data.data[0];
            console.log(this.weatcherData.tem);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.box {
  width: 120rem;
  height: 67.5rem;
  background-image: url("../assets/dataanaly-beijing.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info,
.top-middle,
.right {
  flex: 1;
}
.info {
  display: flex;
  margin-top: 2rem;
  font-size: 1rem;

  font-weight: 400;
  color: #ffffff;
  line-height: 1.1rem;
}
.top-middle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.right {
  position: relative;
}
.exit-button {
  width: 4.6rem;
  height: 2rem;
  position: absolute;
  right: 3rem;
  border: none;
  background: transparent url("../assets/Exit-main.png") no-repeat center;
  /* background-image: url("../assets/Exit-main.png"); */
  background-size: 100% 100%;
}
.exit-button:active {
  background-color: transparent; /* 点击时背景透明 */
  border: none; /* 点击时取消边框 */
}
.custom-button:focus {
  background-color: transparent;
  border: none; /* 鼠标在上面取消边框 */
}
.exit-button:hover {
  background-color: transparent;
  border: none; /* 鼠标在上面取消边框 */
}

.title {
  margin-left: 0.5rem;
  letter-spacing: 1rem;

  font-size: 3rem;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
}
.subhead {
  margin-left: 1.2rem;
  letter-spacing: 1.56rem;
  font-size: 1.87rem;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
}
.comment {
  letter-spacing: 0.3rem;
  font-size: 0.8rem;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
}
.ana-body {
  padding: 4rem 6rem;
}
.container {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.full-secondtitle {
  display: flex;
  align-items: center;
  background-color: #ffffff70;
  padding: 0.3rem 1rem;
}
.full-secondtitle .h1 {
  line-height: 1;
  font-size: 1.4rem;

  font-weight: 600;
  color: #ffffff;
}
.ana-item {
  display: flex;
  flex-direction: row;
}
.ana-item1 {
  width: 38rem;
}
.ana-item2 {
  margin-left: 3.625rem;
  width: 65.5rem;
}
.ana-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 100%;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  padding: 1rem 1rem;
}
.flex-ana-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 1rem;
  width: 11.55rem;
  background: transparent url("../assets/dataanaly-item1.png") no-repeat center;
  background-size: 100% 100%;
}
.flex-ana-container2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 1rem;
}
.flex-ana-item {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
  margin-left: 0.5rem;
}
.flex-ana-item2 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-left: 0.5rem;
  margin-right: 3.5rem;
}
.flex-ana-text {
  display: flex;
  flex-direction: row;
}
.ana-number {
  font-size: 2rem;

  font-weight: 600;
  color: #f2f1f1;
}
.ana-text1 {
  display: flex;
  align-items: flex-end;
  font-size: 2rem;

  font-weight: 600;
  color: #f2f1f1;
}
.ana-text2 {
  font-size: 1.1rem;

  font-weight: 400;
  color: #88a0bf;
}
.ana-text3 {
  font-size: 2rem;

  font-weight: 600;
  color: #f2f1f1;
}
/*  */
.bar-chart {
  display: flex;
  justify-content: space-between;
  height: 253px;
  padding: 10px;
}
.bar-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background-color: rgba(0, 0, 0, 0.1);
  margin: 0 10px;
}
.bar {
  width: 50px;
  border-radius: 5px;
}
.cht-ana1 {
  position: relative;
  margin-left: 3rem;
  flex-grow: 1;
  width: 30rem;
  height: 15.75rem;
}
.cht-ana2 {
  margin-left: 3rem;
  flex-grow: 1;
  width: 50rem;
  height: 15.75rem;
}
.cht-ana3 {
  position: relative;
  margin-left: 3rem;
  flex-grow: 1;
  width: 30rem;
  height: 15.75rem;
}
.chart21 {
  position: absolute;
  top: 0;
  left: 0;
  width: 30rem;
  height: 15.75rem;
  z-index: 1;
}
.ana-item-bj4 {
  position: absolute;
  top: 2.8rem;
  left: 5rem;
  width: 4rem;
  height: 11.5rem;
  border: 0.08rem solid #d47118;
}
.ana-item-bj5 {
  position: absolute;
  top: 2.8rem;
  left: 13rem;
  width: 4rem;
  height: 11.5rem;
  border: 0.08rem solid #20bab1;
}
.ana-item-bj6 {
  position: absolute;
  top: 2.8rem;
  left: 21rem;
  width: 4rem;
  height: 11.5rem;
  border: 0.08rem solid #04d74c;
}
.chart22 {
  width: 50rem;
  height: 15.75rem;
}
.chart23 {
  position: absolute;
  top: 0;
  left: 0;
  width: 30rem;
  height: 15.75rem;
  z-index: 1;
}
.ana-item-bj1 {
  position: absolute;
  top: 2.8rem;
  left: 5rem;
  width: 4rem;
  height: 11.5rem;
  border: 0.08rem solid #d47118;
}
.ana-item-bj2 {
  position: absolute;
  top: 2.8rem;
  left: 13rem;
  width: 4rem;
  height: 11.5rem;
  border: 0.08rem solid #20bab1;
}
.ana-item-bj3 {
  position: absolute;
  top: 2.8rem;
  left: 21rem;
  width: 4rem;
  height: 11.5rem;
  border: 0.08rem solid #04d74c;
}
.cht-ana4 {
  margin-left: 3rem;
  flex-grow: 1;
  width: 50rem;
  height: 15.75rem;
}
.chart24 {
  width: 50rem;
  height: 15.75rem;
}
.ana-cht1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.05rem;
  height: 15.75rem;
}
.cht-1 {
  height: 1.8rem;
  width: 1.8rem;
  background-image: url("../assets/第一名.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.cht-2 {
  height: 1.8rem;
  width: 1.8rem;
  background-image: url("../assets/第二名.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.cht-3 {
  height: 1.8rem;
  width: 1.8rem;
  background-image: url("../assets/第三名.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.cht-4 {
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffd9ad;
}
.return {
  display: flex;
  text-align: center;
  align-items: center;
  height: 2.8125rem;
  width: 18.4375rem;
  background-image: url("../assets/返回.png");
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 1.2rem;

  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  margin-top: 1.5rem;
  margin-left: 89rem;
}
.return span {
  margin-left: 7rem;
}
</style>